<route lang="jsonc" type="page">
    {
      "layout": "default",
      "style": {
        "navigationBarTitleText": "问诊记录",
        "navigationBarBackgroundColor": "#FFFFFF",
        "navigationBarTextStyle": "black"
      }
    }
</route>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import { getConsultOrderList, deleteConsultOrder } from '@/api/inquiry'
import { IGetConsultOrderListRequest, IGetConsultOrderListResponse, IConsultOrderItem } from '@/api/types/inquiry'
import { toast } from '@/utils/toast'


// 选项卡数据
const tabs = [
  { id: '2', name: '极速问诊' },
  { id: '1', name: '找医生' },
  { id: '3', name: '开药问诊' }
]

// 当前选中的选项卡
const activeTab = ref('2')

// 订单列表数据
const orderList = ref<IConsultOrderItem[]>([])

// 分页参数
const pagination = reactive<IGetConsultOrderListRequest>({
  current: '1',
  pageSize: '10',
  type: activeTab.value
})

// 加载中状态
const loading = ref(false)

// 获取订单列表
const loadOrderList = async () => {
  if (loading.value) return

  loading.value = true
  try {
    const res = await getConsultOrderList(pagination)
    if (res.code === 10000) {
      orderList.value = res.data.rows || []
      console.log('API 返回数据:', res.data);
console.log('医生信息结构:', orderList.value[0]?.docInfo);
    } else {
      toast.error(res.message || '获取订单列表失败')
    }
  } catch (error) {
    console.error('获取订单列表失败:', error)
    toast.error('网络异常，请重试')
  } finally {
    loading.value = false
  }
}

// 切换选项卡
const switchTab = (tabId: string) => {
  activeTab.value = tabId
  pagination.type = tabId
  pagination.current = '1'
  loadOrderList()
}

// 查看问诊记录
const viewRecord = (orderId: string) => {
  // 跳转到问诊记录详情页
  uni.navigateTo({
    url: `/pages/inquiry/detail?id=${orderId}`
  })
}

// 查看评价
const viewEvaluate = (orderId: string) => {
  // 跳转到评价页面
  uni.navigateTo({
    url: `/pages/inquiry/evaluate?id=${orderId}`
  })
}

// 删除订单
const deleteOrder = async (orderId: string) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该订单吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          const result = await deleteConsultOrder(orderId)
          if (result.code === 10000) {
            toast.success('删除成功')
            // 重新加载订单列表
            loadOrderList()
          } else {
            toast.error(result.message || '删除失败')
          }
        } catch (error) {
          console.error('删除订单失败:', error)
          toast.error('网络异常，请重试')
        }
      }
    }
  })
}

// 咨询其他医生
const consultOtherDoctor = () => {
  // 跳转到找医生页面
  uni.navigateTo({
    url: '/pages/doctorlist/doctorlist'
  })
}

// 页面加载时获取数据
onMounted(() => {
  loadOrderList()
})
</script>

<template>
  <view class="inquiry-container">
    <!-- 选项卡 -->
    <view class="tabs-container">
      <view
        v-for="tab in tabs"
        :key="tab.id"
        class="tab-item"
        :class="{ 'active': activeTab === tab.id }"
        @click="switchTab(tab.id)"
      >
        {{ tab.name }}
      </view>
    </view>

    <!-- 订单列表 -->
    <view class="order-list">
      <view class="order-item" v-for="order in orderList" :key="order.id">
        <view class="order-header">
          <view class="doctor-info">
            <image :src="order.docInfo?.avatar || '/static/images/default-avatar.png'" class="avatar"></image>
            <view class="doctor-name">{{ order.docInfo?.name || '未知医生' }}</view>
          </view>
          <view class="order-status">{{ order.statusValue }}</view>
        </view>

        <view class="order-body">
          <view class="disease-desc">
            <text class="label">病情描述：</text>
            <text class="value">{{ order.illnessDesc }}</text>
          </view>
          <view class="price">
            <text class="label">价格：</text>
            <text class="value">¥{{ order.payment ? order.payment.toFixed(2) : '0.00' }}</text>
          </view>
          <view class="create-time">
            <text class="label">创建时间：</text>
            <text>{{ order.createTime }}</text>
          </view>
        </view>

        <view class="order-footer">
          <view v-if="order.status === 4" class="footer-buttons">
            <button class="btn-view-record" @click="viewRecord(order.id)">问诊记录</button>
            <button class="btn-view-evaluate" @click="viewEvaluate(order.id)">查看评价</button>
          </view>
          <view v-else-if="order.status === 5" class="footer-buttons">
            <button class="btn-delete" @click="deleteOrder(order.id)">删除订单</button>
            <button class="btn-consult-other" @click="consultOtherDoctor">咨询其他医生</button>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="orderList.length === 0 && !loading">
        <image src="/static/image/empty.png" class="empty-img"></image>
        <text class="empty-text">暂无问诊记录</text>
      </view>

      <!-- 加载中 -->
      <view class="loading-state" v-if="loading">
        <u-loading></u-loading>
      </view>
    </view>
  </view>
</template>

<style scoped>
.inquiry-container {
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #f6f7f9;
}

.tabs-container {
  display: flex;
  height: 90rpx;
  width: 100vw;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 20rpx;
  background-color:#fff ;
  margin-top: -18rpx;
  margin-left: -17rpx;
}

.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  color: #666;
  position: relative;
}

/* .tab-item.active {
  color: #3879d9;
} */

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 6rpx;
  background-color: #0dc1a1;
  border-radius: 3rpx;
}

.order-list {
  width: 100%;
}

.order-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.doctor-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.doctor-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.order-status {
  font-size: 28rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
}

.order-status:contains('已完成') {
  background-color: #e6f7ee;
  color: #00b42a;
}

.order-status:contains('已取消') {
  background-color: #fef0f0;
  color: #f5222d;
}

.order-body {
  margin-bottom: 20rpx;
}

.disease-desc,
.price,
.create-time {
  margin-bottom: 16rpx;
  font-size: 28rpx;
  color: #666;
}

.label {
  color: #999;
  margin-right: 10rpx;
}

.value {
  /* color: #f5222d; */
  font-weight: bold;
}

.order-footer {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
}

.footer-buttons {
  display: flex;
  gap: 20rpx;
}

.btn-view-record,
.btn-view-evaluate,
.btn-delete,
.btn-consult-other {
  padding: 0 24rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 26rpx;
  border-radius: 30rpx;
}

.btn-view-record,
.btn-view-evaluate {
  border:1rpx solid #f5f5f5;
  background-color: #f0f2f5;
  color: #666;
}

.btn-delete {
  background-color: #f5f5f5;
  color: #aaa;
}

.btn-consult-other {
  border:1rpx solid #16c2a3;
  background-color: #fff;
  color: #16c2a3;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 500rpx;
}

.empty-img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>